<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>logo</title>
	<style>
		*{padding:0;
			margin: 0;}
		.logo{
			position: relative;
			moz-user-select: -moz-none; 
			-moz-user-select: none; 
			-o-user-select:none; 
			-khtml-user-select:none; 
			-webkit-user-select:none; 
			-ms-user-select:none; 
			user-select:none;
			display: inline-block;
			border-radius: 50%;
			background: #fff;
		}
		.circle{
			position: relative;
			background: rgba(255,255,255,0);
			border-radius: 50%;
			border: 3px solid #000;
			height:60px;
			width:60px;
			-webkit-animation: around 7s linear infinite;
		}
		@-webkit-keyframes around{
		    0%{
		        -webkit-transform: rotate(45deg);
		    }
		    100%{
		    	-webkit-transform: rotate(405deg);
		    }
		} 
		.arr {
			position: absolute;
			background: #fff;
			width:80%;
			height:30%;
		}
		.arr_left{
			-webkit-transform: rotate(45deg);
		}
		.arr_right{
			left:35%;
			-webkit-transform: rotate(135deg);
		}
		#arrow1{
			position: absolute;
			width:11%;
			height:10%;
			top:-7%;
			left:50%;
			-webkit-transform: rotate(-90deg);
		}
		#arrow2{
			position: absolute;
			width:11%;
			height:10%;
			top:77%;
			left:86%;
			-webkit-transform: rotate(30deg);
		}
		#arrow3{
			position: absolute;
			width:11%;
			height:10%;
			top:70%;
			left:-1%;
			-webkit-transform: rotate(150deg);
		}
		.logo span{
			position:absolute;
			font:bold 150% "Microsoft YaHei";
			
		}
		.T1{
			top:19%;
			left:20px;
		}
		.Y1{
			top:19%;
			left:32px;
		}
		.mask{
			position: absolute;
			top:58%;
			left:0;
			overflow: hidden;
			height:60px;
			width:60px;
		}
		.T2{
			top:-34%;
			left:20px;
			transform:scale(1,1.5);
    		-ms-transform:scale(1,1.5);
    		-webkit-transform:scale(1,1.5);
    		-moz-transform:scale(1,1.5);
    		-o-transform:scale(1,1.5);
		}
		.Y2{
			top:-34%;
			left:32px;
			transform:scale(1,1.5);
    		-ms-transform:scale(1,1.5);
    		-webkit-transform:scale(1,1.5);
    		-moz-transform:scale(1,1.5);
    		-o-transform:scale(1,1.5);
		}
	</style>
</head>
<body>
<div class="logo">
	<div class="circle">
	 	<div id="arrow1">
	 		<div class=" arr arr_left"></div>
			<div class="arr arr_right"></div>
	 	</div>
	 	<div id="arrow2">
	 		<div class=" arr arr_left"></div>
			<div class="arr arr_right"></div>
	 	</div>
	 	<div id="arrow3">
	 		<div class=" arr arr_left"></div>
			<div class="arr arr_right"></div>
	 	</div>
 	</div>
	<span class="T1">T</span>
	<span class="Y1">Y</span>
	<div class="mask">
		<span class="T2">T</span>
		<span class="Y2">Y</span>
	</div>
	
</div>
 
 

</body>
</html>